
import { PureComponent } from 'react'
import {connect} from 'react-redux';


class Login extends PureComponent {
  // 组件自己的状态  // 组件公共状态 store
  state = {
    email:'',
    password:'',
  }

  changeUserEmail = (ev)=>{
    // console.log(ev.target.value);
    // 校验
    // 设置
    this.setState({email:ev.target.value})
  }

  changePassword=ev=>{
    // console.log(ev.target.value);
    this.setState({password:ev.target.value})
  }

  //state 是在组件里
  onSubmitForm = ()=>(ev)=>{
    ev.preventDefault()
    console.log(this.state);
    //网络接口请求 ： 登录
    this.props.onSubmitUser(this.state)
  }

  render() {
    return (
      <div className='container page'>
        <div className='row'>
          <div className='col-md-6 offset-md-3 col-xs-12'>
            <h1>登录</h1>
            <form onSubmit={this.onSubmitForm()}>
              <fieldset className='form-group'>
                <input 
                  className='form-control form-control-lg'
                  type="text"
                  placeholder='用户邮箱'
                  value={this.state.email}
                  onChange={this.changeUserEmail}
                 />
              </fieldset>
              <fieldset className='form-group'>
                <input 
                  className='form-control form-control-lg'
                  type="password"
                  placeholder='用户密码'
                  value={this.state.password}
                  onChange={this.changePassword}
                 />
              </fieldset>
              <button
               className='btn btn-lg btn-primary pull-xs-right'
               type='submit'
              >
                点我登录
              </button>
            </form>
          </div>
        </div>
      </div>
    )
  }
}

//数据
// const mapState= state=>{
//   console.log(state.user); //细分reducer
//   return {...state.user}
// }

const mapState= state=>({...state.user})

//行为
const mapDispatch = dispatch=>{
  return {
    onSubmitUser:(user)=>dispatch({type:'SUBMIT',payload:user})
  }
}


export default connect(mapState,mapDispatch)(Login)